<template>
  <div>
    <el-input v-model="input1" placeholder="Please input" />
    <el-input
      v-model="input2"
      placeholder="Please input"
      show-password
      @focus="focus"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const input1 = ref('');
    const input2 = ref('');

    const focus = function (e: InputEvent) {
      const target = e.target as HTMLInputElement;
      const value = target.value;

      if (value.length) {
        target.setAttribute('type', 'password');
      } else {
        target.setAttribute('type', 'text');
      }
      console.log({ target, e });
      console.log(target.value);
    };
    return {
      input1,
      input2,
      focus,
    };
  },
});
</script>

<style scoped></style>
